<template>
	<view>
		<view class="course-container">
			<view class="course-style" v-for="(item,index) in corseList" :key="index" @click="courseDetailBtn(item)">
				<view class="course-content">
					<view class="course-img">
						<img :src="item.images" alt="" style="width: 100%; height: 100%;	border-radius: 20rpx 20rpx 0 0 ;	">
					</view>
					<view class="course-bottom">
						<view class="course-name">
							{{item.name}}
						</view>
						<view class="age">
							学龄阶段：{{item.schoolAge}}
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCourseList} from '@/utils/api.js'
	export default {
		data() {
			return {
				corseList:[]
			}
		},
		onLoad(){
			this.getCourseList()
		},
		methods: {
			async getCourseList(){
				uni.showLoading()
				const res = await getCourseList()
				if(res.code == 200){
					uni.hideLoading()
				    this.corseList = res.rows
				}
			 	
			},
			courseDetailBtn(item){
				uni.navigateTo({
				  url: './courseDetail?id=' + item.id,
				})
			},
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		background-color: #efefef;
	}

	/* #endif */
</style>

<style scoped lang="scss">
.course-container{
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	flex-wrap: wrap;

}
.course-style{
	width: 340rpx;
	margin-bottom: 40rpx;
}
.course-content{
	
	/* height: 800rpx; */
}
.course-img{
	width: 340rpx;
	height: 300rpx;
	border-radius: 20rpx 20rpx 0 0 ;	
}
.course-bottom{
	background-color: #ffffff;
	padding-top: 10rpx;
	padding-left: 20rpx;
	padding-bottom: 20rpx;
    border-radius: 0 0 20rpx 20rpx;	
}
.course-name{
   font-weight: bold;
}
.age{
	font-size: 22rpx;
	margin-top: 10rpx;
	color: #727272;
}
</style>
